<template>
    <div class="layerRtb layerRtb-threecolumn layerRtb-right">
        <three-title :title="{name:'离职'}" :close="false">
            <span tag="i" class="rig_close fr" @click="$parent.$parent.clickFourShow()"></span>
        </three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="137">
            <div class="analyItem">
                <p class="analyItemTit tx-center">性质</p>
                <div class="analyItemCon clearfix">
                    <label class="uiRadio12">
                        <input type="radio" name="radios" value="0" class="uiRadio12-input laheiChecked" checked="checked" @click="PersonState(0)">拉黑</label>
                    <label class="uiRadio12">
                        <input type="radio" name="radios" value="2" class="uiRadio12-input laheiChecked" @click="PersonState(2)">个人</label>
                    <label class="uiRadio12">
                        <input type="radio" name="radios" value="1" class="uiRadio12-input laheiChecked" @click="PersonState(1)">公司</label>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">资料</p>
                <div class="analyItemCon clearfix">
                    <div class="clearfix fl mr20 xieyi">
                        <p class="tx-center" id="dowload_doc">离职协议</p>
                        <rx-upload :data="{id: 11,attrModelid:26}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '70px'}" @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                        <rx-viewer :images="urlList" class="fl ml10 ">
                            <div class="clearfix">
                                <div v-for="(item, index) of urlList" :key="index" class="fl mr10">
                                    <img :src="item.url | smallImg(80, 80)" :alt="index">
                                </div>
                            </div>
                        </rx-viewer>
                        <!-- <p class="tx-center cBlue cPoi">打印</p> -->
                    </div>
                    <p class="fl col-md-11">
                        <textarea class="mt5 col-md-10" placeholder="离职备注" style="height: 95px;" v-model="content"></textarea>
                    </p>
                    <p class="clearfix" style="right: 30px;">
                        <span class="fl lizhiSubmit">
                            <input type="button" class="uiBtn-blue uiBtn-normal" value="提交" style="" @click="PersonLiZhi()">
                        </span>
                    </p>
                </div>
            </div>
            <div class="analyItem zhibaoContent">
                <p class="analyItemTit tx-center">项目</p>
                <div class="analyItemCon clearfix">
                    <p class="fl col-md-4">
                        <span class="cLightGray pr8">质保内</span>
                        <span class="ng-binding"></span>
                    </p>
                    <p class="fr">
                        <rx-switch></rx-switch>
                    </p>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">押金</p>
                <div class="analyItemCon clearfix">
                    <div class="fl mr20">
                        <p class="tx-center">押金</p>
                        <rx-upload :data="{id: 11,attrModelid:12}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '70px'}" @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                        <rx-viewer :images="urlLists" class="fl ml10 ">
                            <div class="clearfix">
                                <div v-for="(item, index) of urlLists" :key="index" class="fl mr10">
                                    <img :src="item.url | smallImg(80, 80)" :alt="index">
                                </div>
                            </div>
                        </rx-viewer>
                        <p class="tx-center cBlue cPoi">上传押金条</p>
                    </div>
                    <p class="fr" style="margin-top:40px;">
                        <span class="fr">
                            <!-- <input type="button" class="uiBtn-blue uiBtn-normal" value="提交" style=""> -->
                        </span>
                    </p>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">退押金</p>
                <div class="analyItemCon clearfix">
                    <p class="">
                        <span class="cLightGray pr8">退还金额</span>
                        <input class="p-money-inp" type="text" style="margin-left: 3px;" v-model="money">
                    </p>
                    <div class="mt10">
                        <span class="cLightGray pr8">备注内容</span>
                        <textarea class="" v-model="contents"></textarea>
                        <input type="button" class="uiBtn-blue uiBtn-normal fr" value="退还押金" @click="tuiDeposit()">
                    </div>
                </div>
            </div>
        </div>
        <div class="layerRtb-footer">
            <div class="analyItem">
                <p class="analyItemTit tx-center">结果</p>
                <div class="analyItemCon">
                    <p class="fl col-md-9"></p>
                    <p class="fr col-md-3">
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { UpdatePmUserIsFree, savePhotoByUid, findPhotoByUid, savePmDepositDetailByUid } from '../../Resources/Api/index'
import { mapGetters } from 'vuex'
export default {
    data () {
        return {
            content: '', // 离职备注
            stage: -1, // 离职状态
            attrFileUrl: '', // 路径
            urlList: [], // 照片回显集合
            urlLists: [], // 退押照片回显集合
            contents: '', // 退押备注
            money: '', // 退押金额,
            flag: 0
        }
    },
    created () {
        this.findPhotoByUid() // 离职明细回显
        this.findPhotoByUids() // 退押照片回显
    },
    methods: {

        PersonState (value) {
            //  alert(value)
            this.stage = value
        },
        PersonLiZhi () {
            UpdatePmUserIsFree({
                uid: this.leftInfo.uid,
                userno: sessionStorage.getItem('userNo'),
                username: sessionStorage.getItem('userName'),
                remarks: this.content,
                leaveType: this.stage
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.$message('处理成功！')
                    this.$router.go(0)
                    this.content = ''
                    this.stage = 0
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 离职证明上传
        successUpload (value) {
            savePhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: value.data.attrModelid,
                userType: 1,
                attrServerUrl: '',
                attrFileUrl: value.src
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.$message('上传成功')
                    this.findPhotoByUid() // 离职
                    this.findPhotoByUids() // 退保
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 离职照片回显
        findPhotoByUid () {
            findPhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: 26
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.urlList = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 押金照片回显
        findPhotoByUids () {
            findPhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: 12
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.urlLists = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 退还押金
        tuiDeposit () {
            savePmDepositDetailByUid({
                uid: this.leftInfo.uid,
                creatNo: sessionStorage.getItem('userNo'),
                creatName: sessionStorage.getItem('userName'),
                content: this.contents,
                money: this.money
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.urlList = res.data.Body
                    // this.$router.go(0)
                } else if (res.data.StatusCode === 12101) {
                    // alert('输入押金大于拥有押金')
                    layer.msg('输入押金大于拥有押金')
                } else if (res.data.StatusCode === 103) {
                    // alert('已有待办请等待处理')
                    layer.msg('已有待办请等待处理')
                }
            }).catch(err => {
                console.log(err)
            })
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
        leftInfo () {
            this.findPhotoByUid() // 离职明细回显
            this.findPhotoByUids() // 退押照片回显
        }
    }
}
</script>
<style  scoped>
.xieyi .rx-component-plupload {
  float: left;
}
</style>
